<template>
	<view class="waterfall">
		<view class="left">
			<ul>
				<li style="width: 300rpx;height: 228rpx;border: 1px solid black;margin-bottom: 30rpx;">
					<image src="../../../static/img/微信截图_20240506114437.png" mode=""
					style="width: 100%;height: 100%;"></image>
				</li>
				<li v-for="(ele,i) in arr1" :key='ele' class="box" @tap="goInfo(ele._id)">
					<image :src="ele.img" style="width: 300rpx;"></image>
					<view class="title">
						{{ele.title}}
					</view>
					<view class="user">
						<img src="https://q4.itc.cn/q_70/images03/20240405/39ec09deda3a41d79e03897b0fdf68a0.jpeg" alt="" style="width: 30rpx;height: 30rpx;"/>
						<view class="" style="margin-left: 8rpx;">
							{{ele.user}}
						</view>
						<img src="@/static/img/heart.png" style="width: 30rpx;height: 30rpx;position: absolute;right: 71rpx;bottom: 24rpx;" alt="" />
						<view class="like">
							260
						</view>
					</view>
				</li>
			</ul>
		</view>
		
		<view class="right">
			<ul>
				<li v-for="(ele,i) in arr2" :key='ele' class="box" @tap="goInfo(ele._id)">
					<image :src="ele.img" style="width: 300rpx;"></image>
					<view class="title">
						{{ele.title}}
					</view>
					<view class="user">
						<img src="https://q4.itc.cn/q_70/images03/20240405/39ec09deda3a41d79e03897b0fdf68a0.jpeg" alt="" style="width: 30rpx;height: 30rpx;"/>
						<view class="" style="margin-left: 8rpx;">
							{{ele.user}}
						</view>
						<img src="@/static/img/heart.png" style="width: 30rpx;height: 30rpx;position: absolute;right: 71rpx;bottom: 24rpx;" alt="" />
						<view class="like">
							260
						</view>
					</view>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	export default {
		props:['title','arr1','arr2'],
		data() {
			return {
				lists: ['A', 'B', 'C', 'D', 'E','F','G','H','I','J','K'],
				arr1:this.arr1,
				arr2:this.arr2,
				str:this.title
			}
		},
		methods: {
			
			goInfo(id){
				uni.navigateTo({
					url:'/pages/my/note/info/info?id='+id
				})
			}
		},
		
		// onPullDownRefresh(){
		// 	this.getarr()
		// }
	}
</script>

<style>
.waterfall{
	width: 100%;
	padding: 30rpx;
	box-sizing: border-box;
	display: flex;
}

.left{
	margin-right: 30rpx;
	/* margin-bottom: 30rpx; */
}

li{
	
}

.box{
	width: 300rpx;
	min-height: 500rpx;
	border: 1px solid white;
	box-sizing: border-box;
	background-color: white;
	margin-bottom: 30rpx;
	/* text-align: center; */
	position: relative;
}

.title{
	font-size: 30rpx;
	margin: 24rpx;
}

.user{
	margin-left: 24rpx;
	margin-bottom: 24rpx;
	display: flex;
	font-size: 24rpx;
	line-height: 30rpx;
}

.like{
	position: absolute;
	right: 24rpx;
	bottom: 24rpx;
}
</style>